<template>
  <div class="container">
    <Navbar />
    
    <div class="auth-container">
      <div class="auth-tabs">
        <div class="auth-tab active">登录</div>
        <router-link to="/register" class="auth-tab">注册</router-link>
      </div>
      
      <div class="auth-form">
        <div class="form-group">
          <label>用户名/邮箱</label>
          <input type="text" v-model="username" placeholder="请输入用户名或邮箱">
        </div>
        <div class="form-group">
          <label>密码</label>
          <input type="password" v-model="password" placeholder="请输入密码">
        </div>
        <div class="form-actions">
          <label class="remember-me">
            <input type="checkbox" v-model="rememberMe">
            <span>记住我</span>
          </label>
          <a href="#" class="forgot-password">忘记密码?</a>
        </div>
        <button class="auth-button" @click="login">登录</button>
        
        <div class="social-login">
          <p>或使用第三方账号登录</p>
          <div class="social-icons">
            <button class="social-icon qq"><font-awesome-icon :icon="['fab', 'qq']" /></button>
            <button class="social-icon weixin"><font-awesome-icon :icon="['fab', 'weixin']" /></button>
            <button class="social-icon weibo"><font-awesome-icon :icon="['fab', 'weibo']" /></button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
/**
 * 用户登录页组件
 * @component Login
 */
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import Navbar from '../../components/Navbar.vue'

const router = useRouter()
const username = ref('')
const password = ref('')
const rememberMe = ref(false)

// 登录方法
const login = () => {
  // 这里应该添加表单验证
  if (!username.value || !password.value) {
    alert('请填写用户名和密码')
    return
  }
  
  // 在实际应用中，这里会发送登录请求
  console.log('登录信息:', {
    username: username.value,
    password: password.value,
    rememberMe: rememberMe.value
  })
  
  // 登录成功后跳转到首页
  router.push('/')
}
</script>

<style scoped>
.auth-container {
  max-width: 500px;
  margin: 0 auto;
  background: white;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.auth-tabs {
  display: flex;
  border-bottom: 1px solid #eee;
}

.auth-tab {
  flex: 1;
  text-align: center;
  padding: 15px;
  cursor: pointer;
  color: #666;
  text-decoration: none;
}

.auth-tab.active {
  color: #0078ff;
  font-weight: bold;
  border-bottom: 2px solid #0078ff;
}

.auth-form {
  padding: 30px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  color: #666;
}

.form-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.remember-me {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.forgot-password {
  color: #0078ff;
  text-decoration: none;
}

.auth-button {
  width: 100%;
  padding: 12px;
  background: #0078ff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.social-login {
  margin-top: 30px;
  text-align: center;
}

.social-login p {
  color: #666;
  margin-bottom: 15px;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.social-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  border: none;
  cursor: pointer;
}

.social-icon.qq {
  background: #3b5998;
}

.social-icon.weixin {
  background: #1da1f2;
}

.social-icon.weibo {
  background: #db4437;
}
</style> 